<template>
	<view class="page-box">
		<uni-section title="基本信息" type="line"></uni-section>
		<view class="form-box">
			<view>
				<view>{{ formList[0].lable }}</view>
				<input v-model="house[formList[0].name]" type="text" :placeholder="'请填写' + formList[0].lable" placeholder-style="color:#bdbdbd" />
			</view>
			<view>
				<view>{{ formList[1].lable }}</view>
				<input v-model="house[formList[1].name]" type="text" :placeholder="'请填写' + formList[1].lable" placeholder-style="color:#bdbdbd" />
			</view>
			<view>
				<view>{{ formList[2].lable }}</view>
				<input v-model="house[formList[2].name]" type="text" :placeholder="'请填写' + formList[2].lable" placeholder-style="color:#bdbdbd" />
				<text >{{formList[2].unit}}</text>
			</view>
			<view>
				<view>所在地区</view>
				<pickerAddress @change="change" @transferLocation="getLocation" :class="{'active':isActive, 'picker':true}">{{txt}}</pickerAddress>								
			</view>
			<view>
				<view>{{ formList[3].lable }}</view>
				<input v-model="house[formList[3].name]" type="text" :placeholder="'请填写' + formList[3].lable" placeholder-style="color:#bdbdbd" />
			</view>			
			<view>
				<view>{{ formList[4].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[4])" :range="formList[4].array" range-key="val">
						<view :class="formList[4].index === '' ? 'c-gray' : ''">{{ formList[4].index === "" ? '请选择'+formList[4].lable : formList[4].array[formList[4].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[5].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[5])" :range="formList[5].array" range-key="val">
						<view :class="formList[5].index === '' ? 'c-gray' : ''">{{ formList[5].index === "" ? '请选择'+formList[5].lable : formList[5].array[formList[5].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[6].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[6])" :range="formList[6].array" range-key="val">
						<view :class="formList[6].index === '' ? 'c-gray' : ''">{{ formList[6].index === "" ? '请选择'+formList[6].lable : formList[6].array[formList[6].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[7].lable }}</view>
					<input v-model="house[formList[7].name]" type="text" :placeholder="'请填写' + formList[7].lable" placeholder-style="color:#bdbdbd" />
				<text >{{formList[7].unit}}</text>
			</view>	
			<view>
				<view>{{ formList[8].lable }}</view>
					<input v-model="house[formList[8].name]" type="text" :placeholder="'请填写' + formList[8].lable" placeholder-style="color:#bdbdbd" />
				<text >{{formList[8].unit}}</text>
			</view>	
			<view>
				<view>{{ formList[9].lable }}</view>
					<input v-model="house[formList[9].name]" type="text" :placeholder="'请填写' + formList[9].lable" placeholder-style="color:#bdbdbd" />
				<text >{{formList[9].unit}}</text>
			</view>	
			<view>
				<view>{{ formList[10].lable }}</view>
					<input v-model="house[formList[10].name]" type="text" :placeholder="'请填写' + formList[10].lable" placeholder-style="color:#bdbdbd" />
				<text >{{formList[10].unit}}</text>
			</view>				
			<view>
				<view>{{ formList[11].lable }}</view>
				<view class="more-input">
					<input type="text" v-model="park_space_ratio_1" /><text>:</text>
					<input type="text" v-model="park_space_ratio_2" />			
				</view>
			</view>
			<view>
				<view>{{ formList[12].lable }}</view>
					<input v-model="house[formList[12].name]" type="text" :placeholder="'请填写' + formList[12].lable" placeholder-style="color:#bdbdbd" />
				<text >{{formList[12].unit}}</text>
			</view>
			<view>
				<view>{{ formList[13].lable }}</view>
					<input v-model="house[formList[13].name]" type="text" :placeholder="'请填写' + formList[13].lable" placeholder-style="color:#bdbdbd" />
				<text >{{formList[13].unit}}</text>
			</view>		
			<view>
				<view>{{ formList[14].lable }}</view>
				<input v-model="house[formList[14].name]" type="text" :placeholder="'请填写' + formList[14].lable" placeholder-style="color:#bdbdbd" />
			</view>	
			<view>
				<view>{{ formList[15].lable }}</view>
				<input v-model="house[formList[15].name]" type="text" :placeholder="'请填写' + formList[15].lable" placeholder-style="color:#bdbdbd" />
				<text >{{formList[15].unit}}</text>
			</view>	
			<view>
				<view>{{ formList[16].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[16])" :range="formList[16].array" range-key="val">
						<view :class="formList[16].index === '' ? 'c-gray' : ''">{{ formList[16].index === "" ? '请选择'+formList[16].lable : formList[16].array[formList[16].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[17].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[17])" :range="formList[17].array" range-key="val">
						<view :class="formList[17].index === '' ? 'c-gray' : ''">{{ formList[17].index === "" ? '请选择'+formList[17].lable : formList[17].array[formList[17].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
		</view>		
		<view class="big-btn" @click="fnSubmit">下一步</view>
	</view>
</template>

<script>
import pickerAddress from '@/components/pickerAddress/pickerAddress.vue'
import uniSection from '@/components/uni-section/uni-section.vue';
export default {
	components: {
		uniSection,
		pickerAddress
	},
	onLoad(option) {
		let param = JSON.parse(decodeURIComponent(option.param))		
		this.house.typesOfHouseSource = param.typeOfHouseSource		
	},
	data() {
		return {
			isActive:false,
			txt:'选择地址',
			park_space_ratio_1:'',
			park_space_ratio_2:'',
			house:{
				building_name:'',
				developer: '',
				reference_average_price:'',
				location: '',
				address:'',
				type_of_residence:'',
				type_of_building:'',
				house_renovation_condition:'',
				area_covered:'',
				building_area:'',
				term_of_property_right :'',
				num_of_plan :'',
				park_space_ratio :'',
				green_rate :'',
				plot_rate :'',
				property_company :'',
				property_cost :'',
				heat_mode:'',
				water_power_supply:''							  				
			},
			// TODO app启动时，查询字段表然后合成formList
			formList: [
				{
					lable: '楼盘名称',
					type: 1,
					name: 'building_name'
				},
				{
					lable: '开发商',
					type: 1,
					name: 'developer'
				},
				{
					lable: '参考均价',
					type: 1,
					name: 'reference_average_price',
					unit: '元/㎡'
				},			
				{
					lable: '楼盘地址',
					type: 1,
					name: 'address'
				},
				{
					lable: '房屋类型',
					type: 3,
					name: 'type_of_residence',
					index: '',
					array: [{ val: '住宅' }, { val: '别墅' }]
				},
				{
					lable: '建筑类型',
					type: 3,
					name: 'type_of_building',
					index: '',
					array: [{ val: '板楼' }, { val: '塔楼' }, { val: '板塔结合' }]
				},
				{
					lable: '装修情况',
					type: 3,
					name: 'house_renovation_condition',
					index: '',
					array: [{ val: '毛坯' }, { val: '普通装修' }, { val: '精装修' }]
				},
				{
					lable: '占地面积',
					type: 1,
					name: 'area_covered',
					unit: '㎡'
				},
				{
					lable: '建筑面积',
					type: 1,
					name: 'building_area',
					unit: '㎡'
				},
				{
					lable: '产权年限',
					type: 1,
					name: 'term_of_property_right',
					unit: '年'
				},
				{
					lable: '规划户数',
					type: 1,
					name: 'num_of_plan',
					unit: '户'
				},
				{
					lable: '车位配比',
					type: 3,
					name: 'park_space_ratio',
					unit: '㎡'
				},
				{
					lable: '绿化率',
					type: 1,
					name: 'green_rate',
					unit: '%'
				},
				{
					lable: '容积率',
					type: 1,
					name: 'plot_rate',
					unit: ''
				},
				{
					lable: '物业公司',
					type: 1,
					name: 'property_company',		
				},
				{
					lable: '物业费',
					type: 1,
					name: 'property_cost',	
					unit: '元/㎡/月'
				},
				{
					lable: '供暖方式',
					type: 3,
					name: 'heat_mode',
					index: '',
					array: [{ val: '自供暖' }, { val: '集中供暖' }]		
				},
				{
					lable: '供电供水',
					type: 3,
					name: 'water_power_supply',
					index: '',
					array: [{ val: '民水民电' }, { val: '商水商电' }]		
				}
			]			
		};
	},
	methods: {
		change(data) {
			this.isActive = true			
			this.txt = data.data.join('')							
		},
		getLocation(location){
			location = location.replace(/,/g, '')				
			this.house.location = location
		},
		bindPickerChange: function(e, box) {			
			box.index = e.detail.value
			this.house[box.name] = parseInt(e.detail.value) + 1	
		},	
		fnSubmit() {	
			this.house.park_space_ratio = this.park_space_ratio_1 + ';' + this.park_space_ratio_2
			let flag = false
			for(let k in this.house){
				console.log(k)
				if(this.house[k] === ''){					
					flag = true
					break
				}
			}
			if(flag === true){				
				uni.showModal({				   
					content: '请填写完整'
				});	
				return
			}			
			let url = '/pages/house/publishHouseType?param=' + encodeURIComponent(JSON.stringify(this.house))		
			uni.navigateTo({
				url: url
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.page-box {
	padding-bottom: 88rpx;
	box-sizing: border-box;

	/deep/ .uni-section {
		margin-top: 0;
		background: #fff;
	}

	/deep/ .line {
		background-color: #f13b32;
	}
}
.picker{
	color: #ccc;
}
.picker.active{
	color: #000;
}
.form-box > uni-view.two-line-box {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.form-box {
	margin-bottom: 20rpx;
	padding-left: 40rpx;
	box-sizing: border-box;
	background: #fff;

	> view {
		display: flex;
		border-bottom: 1px solid #e5e5e5;
		box-sizing: border-box;
		align-items: center;
		font-size: 24rpx;

		&:last-of-type {
			border-bottom: none;
		}

		> view {
			width: 140rpx;
			line-height: 80rpx;
			font-size: 24rpx;

			&.more-input {
				display: flex;
				flex: 1;
				align-items: center;

				input {
					flex: 1;
					padding: 0 40rpx;
					height: 40rpx;
					border-bottom: 1px solid;
					width:20rpx;
					text-align: center;
				}
			}
		}

		input,
		.uni-input {
			padding: 20rpx 40rpx 20rpx 0;
			box-sizing: border-box;
			flex: 1;
			height: 80rpx;
			line-height: 40rpx;
		}

		text,
		uni-icons {
			padding: 0 20rpx;
			box-sizing: border-box;
		}

		picker {
			flex: 1;
			
			view {
				font-size: 24rpx;
			}
		}
	}
}

.big-btn {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	line-height: 88rpx;
	text-align: center;
	color: #fff;
	background: #f13b32;
	z-index: 100;
}
</style>
